import { CONTENT_CLASS_NAME, inputTemplateData, tableTemplateData, textTemplateData, VIEW_CLASS_NAME } from "../const";
import { createElement } from "../utils";
import BaseNode from "./BaseNode";
import InputNode from "./Voucher/nodes/InputNode";
import TableNode from "./Voucher/nodes/TableNode";
import TextNode from "./Voucher/nodes/TextNode";

import { HiMenu } from "../components/HiMenu";

export class Voucher extends BaseNode {
  protected _nodeType: VoucherNodeType = "voucher"
  protected _rootEl: HTMLElement;
  protected _viewAreaEl = createElement("section", { className: VIEW_CLASS_NAME, style: { width: "100%", height: "100%" } });




  element = createElement("div", {
    className: CONTENT_CLASS_NAME,
    style: {
      backgroundColor: "#fff",
      backgroundSize: "100% 100%",
      backgroundRepeat: "no-repeat",
      boxShadow: "0 0 10px rgba(0,0,0,0.2)"
    }
  });

  protected _color = "#09f";

  protected _options: VoucherTemplate

  protected get options() {
    return { ...this._options };
  }
  protected set options(data: VoucherTemplate) {
    this._options = data;
  }
  protected nodes: BaseNode[] = []

  protected menuView = new HiMenu()

  constructor(el: Element | string, options: VoucherTemplate) {
    super();
    if (!el) {
      throw new Error("el is not found");
    }
    if (typeof el === "string") {
      const e = document.querySelector(el);
      if (!e) {
        throw new Error("el is not found");
      }
      this._rootEl = e as HTMLElement;
    } else {
      this._rootEl = el as HTMLElement;
    }
    this._rootEl.classList.add("hi-voucher");
    this._rootEl.setAttribute("style", `position: relative; overflow: hidden; min-width:800px; min-height:600px`)
    this._rootEl.onclick = (e) => {
      this.menuView.open = false;
    }
    this._options = options;

  }

  protected rendToolbars() {
    // 渲染工具栏
    console.log("渲染工具栏111111111111")
  }

  protected renderVoucher() {
    const { bg, width, height } = this._options
    if (bg) this.element.style.backgroundImage = `url(${bg})`;
    this.element.style.width = `${width}px`;
    this.element.style.height = `${height}px`;
  }

  protected renderContent() {
    const typeMap = { "texts": "text", "inputs": "input", "tables": "table" }
    Object.keys(this.options.nodes).forEach((k) => {
      const key = k as keyof typeof this.options.nodes;
      const nodes = this.options.nodes[key];
      if (!nodes || !nodes.length) return
      const nodeType = typeMap[key] as "input" | "table" | "text"
      nodes.forEach((node) => {
        this.createNode(nodeType, node)
      })
    })
  }

  protected createNode(type: "input" | "table" | "text", nodeData: any) {
    let node: BaseNode | null = null
    if (type === "text") {
      node = new TextNode(nodeData || textTemplateData())
    } else if (type === "input") {
      node = new InputNode(nodeData || inputTemplateData())
    } else if (type === "table") {
      node = new TableNode(nodeData || tableTemplateData())
    }
    if (node) {
      this.nodes.push(node)
      if (node.element) this.element.appendChild(node.element);
    }
    return node
  }


  render() {
    this.renderVoucher()
    this.renderContent()
    this.rendToolbars()
    this._viewAreaEl.appendChild(this.element);
    this._rootEl.appendChild(this._viewAreaEl);
  }


  setOption(option: VoucherTemplate) {

  }


}
